<template>
  <el-container
    :style="{ height: $store.state.mainContainerHeight - 40 + 'px' }"
  >
    <el-main>
      <el-container>
        <el-main>
          <el-card class="photo-config-item">
            <div slot="header">等级信息</div>
            <el-form
              ref="form"
              label-width="180px"
              :model="LevelForm.formData"
              :rules="LevelForm.rules"
              style="overflow-x: auto"
            >
              <el-form-item label="名称" prop="name">
                <el-input
                  style="width: 220px"
                  placeholder="名称"
                  v-model.trim="LevelForm.formData.name"
                  maxlength="50"
                  show-word-limit
                ></el-input>
              </el-form-item>

              <el-form-item label="备注" prop="memo">
                <el-input
                  type="textarea"
                  style="width: 400px"
                  placeholder="请输入备注"
                  :autosize="{ minRows: 4, maxRows: 10 }"
                  v-model="LevelForm.formData.memo"
                  maxlength="512"
                  show-word-limit
                />
              </el-form-item>

              <el-form-item type="flex" justify="center">
                <el-button style="margin-right: 100px" @click="gotoList" v-waves
                  >返回</el-button
                >
                <el-button
                  type="primary"
                  :loading="LevelForm.loading"
                  @click="onSubmit"
                  v-waves
                  >{{ this.LevelForm.loading ? "提交中" : "保存" }}</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import levelAPI from '@/api/level'
import { mapGetters } from 'vuex'
export default {
  props: ['id'],
  name: 'info',
  components: {},
  data () {
    return {
      selectLoading: false,
      isUploading: false,
      addLoad: false,
      dialogVisible: false,
      levels: [],
      LevelForm: {
        formData: {
          id: null,
          name: null,
          levelId: null
        },
        loading: false,
        rules: {
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
        }
      }
    }
  },
  created () {
    if (this.isEditMode) {
      levelAPI.getById(this.id).then((res) => {
        this.LevelForm.formData = JSON.parse(JSON.stringify(res.data))
      })
    }
  },
  computed: {
    ...mapGetters(['token']),
    isEditMode () {
      return this.id && this.id > 0
    }
  },
  methods: {
    /**
     * 查询影楼下拉框信息
     */
    gotoList () {
      this.$router.pushTo(this.$router.routesConfig.studioLevelList)
    },
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false
        }
        this.LevelForm.loading = true
        if (this.id) {
          levelAPI
            .update(this.LevelForm.formData)
            .then(() => {
              this.LevelForm.loading = false
              this.gotoList()
            })
            .catch(() => (this.LevelForm.loading = false))
        } else {
          levelAPI
            .insert(this.LevelForm.formData)
            .then(() => {
              this.LevelForm.loading = false
              this.$message.success('添加商品成功')
              this.gotoList()
            })
            .catch(() => (this.LevelForm.loading = false))
        }
      })
    },
    onDelete () {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('删除')
      })
    }
  }
}
</script>
